<template>
  <el-card>
    <!-- 学习记录列表 -->
    <el-table
      :data="learnRecordList"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        type="index"
        width="60"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="studyContent"
        align="center"
        label="学习内容"
        width="370"
      >
      </el-table-column>
      <el-table-column
        prop="studyTime"
        align="center"
        label="学习时长(分钟)"
        width="160"
      >
        <template #default="scope">
          {{ getStudyTimeMinute(scope.row.studyTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="studyTime"
        align="center"
        label="学习时长(小时)"
        width="160"
      >
        <template #default="scope">
          {{ getStudyTimeHour(scope.row.studyTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="创建时间"
        width="240"
      >
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, getCurrentInstance, ComponentInternalInstance, onMounted, reactive } from 'vue';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;

// 学习记录列表
const learnRecordList = ref([]);
// 获取学习记录列表的页码参数对象
const queryInfo = reactive({
  // 用户id
  userId: proxy.$storage.getItem('userInfo').userId,
  // 当前的页数
  pageNum: 1,
  // 当前每页显示的数据条数
  pageSize: 1,
});
// 学习记录列表总条数
const total = ref(0);
// 是否正在加载
const loading = ref(true);

onMounted(() => {
  getLearnRecordList();
})

// 获取学习记录列表
function getLearnRecordList() {
  loading.value = true;
  proxy.$request.dailyRecord.records(queryInfo).then((res: any) => {
    if (res.code === '204') {
      loading.value = false;
      return ElMessage({
        message: res.msg,
        type: 'warning',
        duration: 1000,
      });
    }
    learnRecordList.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
  });
};
// 监听 pagesize 改变
function handleSizeChange(newSize: any) {
  queryInfo.pageSize = newSize;
  getLearnRecordList();
};
// 监听页码值改变
function handleCurrentChange(newNum: any) {
  queryInfo.pageNum = newNum;
  getLearnRecordList();
};
// 获得学习时长的分钟数
function getStudyTimeMinute(time: any) {
  return (time / 60).toFixed(0) + ' 分钟';
};
// 获得学习时长的小时数
function getStudyTimeHour(time: any) {
  return (time / 3600).toFixed(2) + ' 小时';
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 10px;
}
</style>
